<template>
        <div class="w-100">
             <!--会员中心导航-->
            <div class="row center_nav container">
                <div class="col-xs-4 navleft"><img @click="$router.go(-1)" src="../../static/images/icon_left_return.png" /></div>
                <div class="col-xs-8">购物订单</div>
            </div>
            <div class="one_gray"></div>
            <div class="main">
                 <div class="order-list">
                     <div class="row list-title">
                         <div class="col-xs-6 ellipsis">美地星球</div>
                         <div class="col-xs-6 ellipsis text-rg">已送达 取餐码：1234</div>
                     </div>
                     <div class="row list-item">
                          <div class="col-xs-10 ellipsis">照烧煎鸡腿饭套餐</div>
                          <div class="col-xs-2 text-rg">*1</div>
                          <div class="col-xs-12 ellipsis">
                               <span class="pull-right">共1件商品，实付¥15.5</span>
                               2017-11-22
                          </div>
                     </div>
                 </div>
            </div>
        </div>
</template>
<script>
    export default{
        name: 'Orders',
        data () {
            return {

            }
        }
    }
</script>

<style scoped>
.container{
    background-color: #fff;
    padding: 0px 3vw;
  }
  .navleft{
    padding:0px;
  }
  .navleft img{
    width: 6.8vw;
  }
.center_nav{
  /*height: 7.5vh;*/
  line-height:  7.5vh;
  background-color: #fff;
  color: #333333;
  font-size: 18px;
}
.one_gray{
  height: 10px;
  background-color: #eee;
}
.main{ width: 100%;}
.bd-t10{border-top: 10px solid #eee;}

.tab-orders{ width: 100%; border-bottom:5px solid #eee; padding: 0 15px}
.tab-orders li{ width: 25%; text-align: center; position: relative; float: left; height: 44px; line-height: 44px;}
.tab-orders li:after{content: ''; display: black; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background: #faa934; 
                     transition: all ease .25s}
.tab-orders li.active{ color: #faa934;}
.tab-orders li.active:after{ width: 100%;}
.order-list{ border-bottom:5px solid #eee;}
.list-title{ padding: 0 15px; line-height: 44px; height: 44px;}
.list-item{ padding: 8px 15px;  border-top: 1px solid #eee; line-height: 36px; }
.text-rg{ text-align: right}

</style>
